<<template>
    <div>

            <!-- <swiper :options="swiperOption" ref="mySwiper"> -->
                <!-- <swiper-slide> -->
                    <el-timeline>
                        <el-timeline-item v-for='ac in activitys' :key="ac.id"  :timestamp="ac.startDate" placement="top">
                        <el-card >
                            <h4 @click='goDetail(ac)'>{{ac.title}}</h4>
                            <p>{{ac.startDate}}</p>
                        </el-card>
                        </el-timeline-item>
                    </el-timeline>
                <!-- </swiper-slide> -->
                <!-- <swiper-slide id='canhide'></swiper-slide> -->
                <!-- <div class="swiper-pagination" slot="pagination"></div> -->
            </swiper>
    <div class='chartbtn'>
        <el-button :class='types == "main" ? "isactivebtn" : ""'  @click='statisByMain'>按主活动参与度统计</el-button>
        <el-button :class='types == "main" ? "" : "isactivebtn"' @click='statisByEvent'>按日程事件参与度统计</el-button>
    </div>
    <div class='charts'>
        <div id='persons'></div>
        <div id='activities'></div>
    </div>
    </div>
</template>
<<script>
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            activitys: [],
            swiperOption: {
                direction : 'vertical',
                autoplay: false,
                mousewheel: true
            },
            types: 'main'
        }
    },
   computed: {
    //    swiper() {
    //        return this.$refs.mySwiper.swiper
    //    }
   },
    mounted() {
        this.getActivityList()
        this.getWechatPeople()
        this.statisByMain()
        
    },
    methods: {
     
        statisByMain() {
            this.types = 'main'
            this.$api.apiStatisByMain({}, res => {
                let linechart  = this.$echarts.init(document.getElementById('activities'))
                let xdata = ['oneSum', 'twoSum', 'threeSum', 'fourSum', 'fiveSum', 'moreThanFive']
                let xais = ['一次', '两次', '三次', '四次', '五次', '五次以上', ]
                let ydata = []
                let data = res.data
                if(data != null) {
                    Object.keys(data).forEach((key, index) => {
                        ydata.push(data[xdata[index]])
                    })
                }
                this.createLineChart(linechart, xais, ydata)
            })
        },
        statisByEvent() {
            this.types = 'date'
            this.$api.apiStatisByDayEvent({}, res => {
                let linechart  = this.$echarts.init(document.getElementById('activities'))
                let xdata = ['oneToTwo', 'threeToFive', 'sixToEight', 'nineToTen', 'moreThanTen']
                let xais = ['一到两次', '三到五次', '六到八次', '九到十次', '超过十次']
                let ydata = []
                let data = res.data
                if(data != null) {
                    Object.keys(data).forEach((key, index) => {
                        ydata.push(data[xdata[index]])
                    })
                }
                this.createLineChart(linechart, xais, ydata)
            })
        },
        getWechatPeople() {
            // 微信关注人数
            this.$api.apiGetWeChatPeopleNum({}, res => {
                let {total, manSum, womanSum, notJoin} = res.data
                let mychart  = this.$echarts.init(document.getElementById('persons'))
                this.creatPieChart(mychart, total, manSum, womanSum, notJoin)
            })
        },
        getActivityList() {
            // 活动列表
            let param = {

            }
            this.$api.apiGetActivityStatis(param, res => {
                    this.activitys = res.data
                    // let dom = document.getElementsByClassName('swiper-slide')
                    // let len = dom.length
                    if(this.activitys.length > 3) {
                        // dom[0].style = 'height: ' + 420 * (this.activitys.length) + 'px'
                    } else {
                        this.swiper.mousewheel.disable() // 禁用滚轮
                        // document.getElementById('canhide').style = 'display: none'
                    }
            })
        },
        goDetail(item) {
            let activity  = {
                title: item.title,
                date: item.startDate
            }
            sessionStorage.setItem('activity', JSON.stringify(activity))
            this.$router.push({path: 'activityEvent', query: {id: item.id}})
        },
      
        createLineChart(mychart, xdata, ydata) {
           
            let option = {
                grid: {
                    left: '7%',
                    right: '5%',
                    top: '25%',
                    bottom: '19%',
                },
                title: {
                    show: false
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['参与度'],
                    right: '3%',
                    top: '10%',
                    itemWidth: 11,
                    itemHeight: 11,
                    textStyle: {
                        color: '#2c3e50',
                        fontSize: 13
                    }
                },
                toolbox: {
                    show: false,
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        show: true,
                        axisTick: {
                            show: false
                        },
                        triggerEvent:true,
                        axisLabel: {
                            fontSize: 15,
                            color: '#2c3e50',
                            
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#2c3e50',//左边线的颜色
                                width:'1'//坐标线的宽度
                            }
                        },
                        data: xdata
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: '',
                        axisLine: {
                            show: false
                        },
                        splitNumber : 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: '#4e608b'
                            }
                        },
                        axisLabel: {
                            fontSize: 13,
                            color: '#2c3e50',
                            margin: 12,
                        },
                        min: 0,
                        boundaryGap: [0.2, 0.2]
                    }

                ],
                series: [
                    {
                        name:'用户数',
                        type:'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#1dacfe'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#4889fb" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#15b3ff" // 100% 处的颜色
                                }], false)
                            }
                        },
                        barWidth: '40%',
                        yAxisIndex: 0,
                        data: ydata
                    }
                ]
            };
            mychart.on('click', params => {
                let cType = params.componentType
                if(cType == 'xAxis' || cType == 'series') {
                   if(cType == 'xAxis') {
                        this.$router.push({path: 'statisdetail', query: {type: this.types, xName: params.value}})
                   } else {
                        this.$router.push({path: 'statisdetail', query: {type: this.types, xName: params.name}})
                   }
                }
                
            })
            mychart.setOption(option)
        },
        creatPieChart(mychart, total, manSum, womanSum, notJoin){
           var data = [{
                value: notJoin,
                name: '未参加活动人数'
            }, {
                value: womanSum,
                name: '参加过活动女性'
            }, {
                value: manSum,
                name: '参加过活动男性'
            }];
            let  option = {
                backgroundColor: '#fff',
                title: {
                    text: '微信公众号总关注人数 \n' + total,
                    x: 'center',
                    y: 'top',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: 16
                    }
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'horizontal',
                    bottom: '0%',
                    data: ['未关注人数', '女性关注人数', '男性关注人数']
                },
                series: [{
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['20%', '50%'],
                    color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{d}%',

                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }, {
                    type: 'pie',
                    radius: ['50%', '78%'],
                    itemStyle: {
                        normal: {
                            color: '#F2F2F2'
                        },
                        emphasis: {
                            color: '#ADADAD'
                        }
                    },
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{c}人',
                            textStyle: {
                                color: '#777777',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    data: data
                }]
            };
            mychart.setOption(option)
        }
    },
}
</script>
<style lang='scss'>
$color-list: (1: red, 2: green, 3: yellow, 4: rgb(56, 166, 230), 5: black);

// .swiper-container {
//     width: 60%;
//     height: 420px;
//     margin: 30px;
//     // .swiper-slide {
//     //     height: 1260px!important;
//     // }
//     @each $i, $index in $color-list {
//         .slide#{$i} {
//             background: $index
//         }
//     }
//     .el-card {
//         h4:hover {
//             cursor: pointer;
//             color: #409EFF
//         }
//         p{
//             margin: 0
//         }
//     } 
// }
.charts {
    display: flex;
    height: 380px;
    margin-top: 70px;
    #persons {
        width: 40%;
    }
    #activities {
        width: 60%
    }
}
.chartbtn {
    position: absolute;
    right: 40px;
    .el-button:hover {
        cursor: pointer;
    }
    .isactivebtn {
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }
}
</style>